<template>
  <div class="app-container" v-loading="pageLoading">
    <researchs :pressButtonControl="pressButtonControl" @createItem="createItem" v-if="basicInfoShow"
      @research="research">
      <template v-slot:firstLine>
        <el-input style="width: 260px;" placeholder="输入设备/编码按回车" clearable class="filter-item"
          @keyup.enter.native="research" @clear="research" v-model="query.query">
        </el-input>
        <el-cascader v-model="query.type_id" filterable style="width: 260px;" placeholder="设备类型" clearable
          class="filter-item" @keyup.enter.native="research" @clear="research" :props="MachineTypeProps"
          :options="MachineType">
        </el-cascader>
      </template>
    </researchs>
    <z-table :list="list" :tableProps="tableProps" :columns="columns">
      <template v-slot:operation="v">

        <a href="javascript:;" class="text-blue" @click.stop="editItems(v.row)">编辑</a>
        <a href="javascript:;" class="text-red" @click.stop="deleteItem(v.row)">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submits"
      :submitLoading="submitLoading" :visible.sync="editFormVisible" :before-close="beforeClose">
      <template v-slot:footer>
        <el-button @click="beforeClose">取消</el-button>
        <el-button v-if="!formProps.disabled" type="primary" @click.native="submits(0)" :loading="submitLoading">确认
        </el-button>
        <el-button type="success" @click.native="submits(1)" :loading="submitLoading" v-if="addShow">保存并继续添加
        </el-button>
      </template>
    </z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import researchs from '@/views/tpm/components/research.vue'
import { deleteChildren } from '@/utils/index.js'
export default {
  name: 'attachmentList',
  mixins: [commonMixin],
  components: { researchs },
  props: {
    basicInfoShow: {
      type: Boolean,
      default: true,
    },
    deviceId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      pressButtonControl: {
        researchs: true, //查询
        exportData: true, // 导出
        more: false, // 更多
        Reset: false, // 重置
        createItems: true, // 创建
      },
      addShow: true,
      api: this.$api.TpmEquipmentPart,
      baseUrl: this.$api.baseUrl,
      // 清单
      name: '设备备件清单',
      tableProps: {
        border: true,
        opsColWith: 100,
        hideOperations: false,
      },
      MachineTypeProps: {
        label: 'machine_type_name',
        value: 'id',
        children: 'child',
        emitPath: false,
      },
      MachineType: [],
      query: {
        page: 1,
        size: 10,
      },
      columns: [
        { title: '设备类型', key: 'machine_type_name', width: 100 },
        { title: '设备编号', key: 'machine_code', width: 100 },
        { title: '备件料号', key: 'item_no' },
        { title: '备件名称', key: 'name' },
        { title: '数量', key: 'qty', width: 80 },
        { title: '备注', key: 'remarks' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改时间', key: 'modify_time', width: 140 },
      ],
      postForList: true,
      fields: [
        {
          title: '设备类型',
          key: 'type_id',
          span: 12,
          name: 'cascader',
          required: true,
          props: {
            filterable: true,
            checkStrictly: true,
            props: {
              children: 'child',
              value: 'id',
              label: 'machine_type_name',
              emitPath: false,
            },
          },
          events: {
            change: this.typeChange,
          },
          options: [],
        },
        {
          title: '设备编码',
          key: 'machine_id',
          span: 12,
          name: 'select',
          options: [],
          props: { filterable: true, remote: true, clearable: true },
        },
        {
          title: '备件',
          key: 'part_account_id',
          span: 12,
          name: 'select',
          options: [],
          required: true,
          props: { filterable: true, remote: true, clearable: true, 'remote-method': this.getpart },
        },

        {
          title: '数量',
          key: 'qty',
          span: 12,
          name: 'number',
          required: true,
          props: {
            // precision: 0,
            min: 0,
          },
        },
        {
          title: '备注',
          key: 'remarks',
          span: 24,
          name: 'textarea',
        },
      ],
    }
  },
  computed: {},
  watch: {
    basicInfoShow: {
      immediate: true,
      handler(val, old) {
        if (!val) {
          this.tableProps = {
            border: true,
            opsColWith: 160,
            fixed: false,
            highlightCurrentRow: true,
            hideOperations: true,
          }
          this.deviceTableProps = {
            border: true,
            opsColWith: 161,
            hideOperations: true,
          }
        }
      },
    },
  },
  created() {
    this.research()
    this.getMachineType()
    this.typeChange()
    this.getpart()
  },
  mounted() {},
  methods: {
    beforeClose() {
      this.addShow = true
      this.editFormVisible = false
    },
    submits(val) {
      if (val) {
        this.submitLoading = true
        this.$request(this.api + 'add', this.data, 'post')
          .then((r) => {
            this.$message.success('操作成功')
            this.data = {}
            this.getList()
          })
          .finally(() => {
            this.submitLoading = false
          })
      } else {
        this.submitLoading = true
        this.$request(this.api + 'add', this.data, 'post')
          .then((r) => {
            this.$message.success('操作成功')
            this.editFormVisible = false
            this.getList()
          })
          .finally(() => {
            this.submitLoading = false
          })
      }
    },
    editItems(v) {
      this.addShow = false
      this.editItem(v)
    },
    // 获取备件
    getpart(val) {
      let Data = {
        name: val ? val : '',
        page: 1,
        size: 100,
      }
      this.$request(this.baseUrl + 'Tpm/TpmPartAccount/GetList', Data, 'post').then((r) => {
        const { list } = r
        this.PlantOptions = list.map((i) => ({
          label: `${i.item_no} ${i.name}`,
          value: i.id,
        }))
        this.getFieldConfig('part_account_id').options = this.PlantOptions
      })
    },

    getMachineType() {
      this.$request(this.baseUrl + 'Tpm/MachineType/GetTreeList').then((r) => {
        let tmp = deleteChildren(r, 'child')
        this.MachineType = tmp
        let tmpMa = this.fields.find((i) => i.key == 'type_id')
        tmpMa.options = tmp
      })
    },
    typeChange() {
      let data = {
        machine_type_id: this.data.type_id,
        page: 1,
        size: 100,
      }
      this.$request(this.baseUrl + 'Tpm/Machine/GetList', data, 'post').then((r) => {
        const { list } = r
        let tmp = list.map((i) => ({
          label: i.machine_name,
          value: i.id,
        }))
        this.getFieldConfig('machine_id').options = tmp
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>